<!--  -->
<template>
  <div class="w-full h-full flex flex-col px-6 pt-6 pb-2">
    <Box class="flex-1">
      <template #headerBtns>
        <header class="w-full h-full flex items-center gap-2 pr-4">
          <a-button
            v-for="item in goodsType"
            :key="item.id"
            size="small"
            :type="currentType.id == item.id ? 'primary' : ''"
            @click="changeGoodsType(item)"
          >
            {{ item.typeName }}
          </a-button>
        </header>
      </template>
      <div class="w-full h-full flex flex-col">
        <header class="h-100px flex justify-between mb-4">
          <div class="flex gap-2 items-center w-[500px]">
            商品名称：<a-input v-model:value="productName" style="width: 300px" />
            <a-button size="small" type="primary" @click="queryProductList">查询</a-button>
          </div>
          <div class="flex-1 flex justify-end gap-4">
            <div>订单金额：{{ totalMoney }}</div>
            <a-button size="small" type="primary" @click="visible = true">下单</a-button>
          </div>
        </header>
        <footer class="flex-1 overflow-y-auto flex flex-wrap gap-4">
          <div
            v-for="item in productArr"
            :key="item.id"
            class="goods-item w-[400px] h-[200px] p-2 grid gap-1 grid-cols-2 grid-rows-[1fr,50px,30px]"
          >
            <img :src="item.image" style="width: 190px; height: 100px" />
            <div class="flex flex-col p-2 justify-around">
              <div>名称：{{ item.productName }}</div>
              <div>零售价：{{ item.money }}</div>
              <div>剩余：{{ item.inventory }}</div>
            </div>
            <div class="col-span-2 flex">
              描述:{{ item?.description ? item.description : '暂无' }}
            </div>
            <div class="col-span-2 flex items-end justify-end gap-4">
              <a-input-number
                v-model:value="item.number"
                size="small"
                :min="1"
                :max="item.inventory"
              />
              <a-popconfirm title="确定加入购物车吗?" @confirm="addGoods(item)">
                <a-button size="small" type="primary">加入购物车</a-button>
              </a-popconfirm>
            </div>
          </div>
        </footer>
      </div>
    </Box>
    <a-modal v-model:visible="visible" title="购物车详情" :footer="null">
      <div class="w-full h-full flex flex-col gap-2">
        <template v-if="shopCart.length > 0">
          <div v-for="item in shopCart" :key="item.id" class="flex justify-around gap-2">
            <div class="flex-1">商品:{{ item.productName }}</div>
            <a-input-number
              v-model:value="item.number"
              class="flex-1"
              size="small"
              :min="1"
              :max="item.inventory"
            />
            <div class="flex-1">总价:{{ item.number * item.money }}</div>
          </div>
        </template>
        <template v-else>
          <div class="w-full flex justify-center items-center text-lg">还未添加商品</div>
        </template>
        <div v-if="shopCart.length > 0" class="mt-4 flex items-center justify-center">
          地址：
          <a-select v-model:value="address" class="flex-1">
            <a-select-option v-for="item in addressList" :key="item.id" :value="item.id">
              {{ item.address }}
            </a-select-option>
          </a-select>
        </div>
        <footer v-if="shopCart.length > 0" class="flex flex-col gap-2 text-lg text-blue-500">
          <div class="w-full flex justify-end">总价：{{ totalMoney }}</div>
          <a-button type="primary" size="small" @click="addOrder">确认下单</a-button>
        </footer>
      </div>
    </a-modal>
  </div>
</template>

<script setup>
import { onMounted, ref, computed } from 'vue'
import Box from '@/components/box/Index.vue'
import { queryGoodsListApi, queryProductListApi } from '@/api/goods'
import { addOrderApi } from '@/api/order'
import { queryAddressListApi } from '@/api/address'
import { useRouter } from 'vue-router'
const router = useRouter() // 所有路由
const goodsType = ref()
const currentType = ref()
const queryGoodsList = async () => {
  const { result } = await queryGoodsListApi({})
  goodsType.value = result
  currentType.value = result[0]
  queryProductList()
}

const changeGoodsType = (item) => {
  if (currentType.value.id === item.id) {
    return
  }
  currentType.value = item
  queryProductList()
}

const productName = ref('')
const productArr = ref()
const queryProductList = async () => {
  const queryInfo = {
    productName: productName.value,
    productTypeId: currentType.value.id,
    shopId: currentType.value.shopId,
    pageNo: 1,
    pageSize: 1000
  }
  const { result } = await queryProductListApi(queryInfo)
  productArr.value = result?.map((item) => {
    item.number = 1
    return item
  })
}

const totalMoney = computed(() => {
  let money = 0
  if (shopCart.value.length === 0) {
    money = 0
  } else {
    shopCart.value.forEach((item) => {
      money += item.money * item.number
    })
  }
  return money
})
const shopCart = ref([])
const addGoods = (item) => {
  const goods = { ...item }
  let flag = true
  shopCart.value.forEach((item) => {
    if (item.id === goods.id) {
      item.number += goods.number
      const number = Number(item.inventory)
      if (item.number > number) {
        item.number = number
      }
      flag = false
    }
  })
  if (flag) {
    shopCart.value.push(goods)
  }
  productArr.value.forEach((item) => {
    item.number = 1
  })
}
const visible = ref(false)

onMounted(() => {
  queryGoodsList()
  getAddressList()
})

const address = ref()
const addressList = ref([])
const getAddressList = async () => {
  const { result } = await queryAddressListApi()
  addressList.value = result
  result.forEach((item) => {
    if (item.defaultAddress) {
      address.value = item.id
    }
  })
}
const addOrder = async () => {
  const data = {
    addressId: address.value,
    totalMoney: totalMoney.value,
    orderDetailList: []
  }
  shopCart.value.forEach((item) => {
    data.orderDetailList.push({
      productId: item.id,
      buyCount: item.number,
      totalMoney: item.number * item.money,
      money: item.money
    })
  })
  await addOrderApi(data)
  router.push('/customPage/order')
}
</script>

<style lang="less" scoped>
.goods-item {
  background: linear-gradient(0deg, #ffffff, #e8f0fa);
  border: 1px solid #e6ebf1;
  box-shadow: 0px 2px 3px 0px rgba(184, 184, 184, 0.45);
}
</style>
